<template>
    <div>
    <div>
      <!-- 搜索栏 -->
      <el-card id="search">
        <el-row>
          <el-col :span="20">
            <el-input v-model="searchModel.tname" placeholder="指标树名" clearable></el-input>
            <el-input v-model="searchModel.time" placeholder="创建时间" clearable></el-input>
            <el-button type="primary" round icon="el-icon-search" @click="getTreeList">查询</el-button>
          </el-col>
        </el-row>
      </el-card>
  
      <!-- 结果列表 -->
      <el-card>
        <el-table :data="treeList" stripe style="width: 100%">
          <el-table-column label="#" width="120">
            <template slot-scope="scope">
          <!--    (pageNo-1) * pageSize + index + 1      -->
              {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="tid" label="tid" width="120"> </el-table-column>
          <el-table-column prop="tname" label="指标树名" width="180`">
          </el-table-column>
          <el-table-column prop="time" label="创建时间"> </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              
              <el-button @click="openEditForm(scope.row.tid)" type="primary" icon="el-icon-edit" circle size="mini"></el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.pageNo"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="searchModel.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  
    </div>
    </div>
  </template>
  
  <script>
  import treeApi from '@/api/treeManage'
  import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
        total: 0,
        title: "",
        dialogFormVisible: false,
        formLabelWidth: '130px',
        searchModel: {
          pageNo: 1,
          pageSize: 10,
        },
        tid: 0,
        treeList: [],
        treeForm: {
  
        }
      };
    },
    methods: {
      openEditForm(tid) {
        // this.title = '修改指标树';
        // treeApi.getTreeById(tid).then( response => {
        //   this.treeForm = response.data;
        // });
        // this.dialogFormVisible = true;
        this.$router.push({
          name: 'tree',
          params: {
            tid: tid,
            boolOp: true
          }
        })
      },
      handleSizeChange(pageSize) {
        this.searchModel.pageSize = pageSize;
        this.getTreeList();
      },
      handleCurrentChange(pageNo) {
        this.searchModel.pageNo = pageNo;
        this.getTreeList();
      },
      getTreeList() {
        this.$set(this.searchModel, 'token', getToken());
        treeApi.getTreeList(this.searchModel).then(response => {
          this.treeList = response.data.treeList;
          this.total = response.data.total;
        });
      }
    },
    created() {
      this.getTreeList();
    }
  };
  </script>
  
  <style>
  #search .el-input {
    width: 200px;
    margin-right: 10px;
  }
  .el-dialog .el-input {
    width: 55%;
  }
  </style>
  